<template>
    <div id="app">
        <div style="background: rgba(255,255,255,0.62);" >
            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
                <div style="  margin-left: 10px;justify-content: flex-start;width: 150px;display:block;float: left;">
                    <h1 style="color: #4d7bee">今日头条</h1>
                </div>

                <el-menu-item index="1">我的</el-menu-item>
                <el-submenu index="2">
                    <template slot="title">\</template>
                    <el-menu-item index="2-1">选项1</el-menu-item>
                    <el-menu-item index="2-2">选项2</el-menu-item>
                    <el-menu-item index="2-3">选项3</el-menu-item>
                </el-submenu>
                <div id="tou">
                    <i class="el-icon-message-solid"></i>
                    <h4>消息</h4>
                    <div style="display: flex; align-items: center;width: auto">
                        <div style="width: 10px"></div>
                        <h4 style="width: auto;float: right;">{{this.username }}</h4>
                        <div style="width: 10px"></div>
                        <el-popover
                                placement="bottom"
                                title="头像"
                                width="200"
                                trigger="hover"
                                content="设置头像">

                            <div style="width: 100%">     <i class="el-icon-s-tools"></i> <el-link type="primary" target="_blank" :href="avtar">查看头像</el-link></div>
                            <div style="width: 100%">     <i class="el-icon-picture"></i> <el-link type="primary" @click="dialogVisible = true">设置头像</el-link></div>

                            <el-button slot="reference">

                                <a :href="zhuye">
                                    <el-avatar :src="this.avtar" style="height: 50px;width: 50px"></el-avatar>
                                </a>
                            </el-button>
                        </el-popover>

                    </div>

                </div>
            </el-menu>
            <el-dialog
                    title="编辑"
                    :visible.sync="dialogVisible"
                    width="43%"
                    :before-close="handleClose">
                <div class="final" style="margin: 5px">
                    <div style="margin: 5px;width: 30%" class="left-panel">输入头像链接</div>
                    <el-input class="right-panel"
                              type="textarea"
                              placeholder="请输入内容"
                              v-model="avtar"
                              show-word-limit
                              style="width: 70%"
                    >
                    </el-input>
                </div>
                <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="handleSubmit">提 交</el-button>
  </span>
            </el-dialog>
            <div class="line"></div>
            <div class="container" style="">
                <div class="left">
                    <div>
                        <a :href="zhuye">
                            <el-avatar :src="this.avtar"

                                       style="width: 60px; height: 60px;"
                            ></el-avatar>
                        </a>
                    </div>
                    <div style="height: 20px"></div>
                    <h2>{{ this.username }}</h2>
                    <div style="height: 40px;width: 10px;background-color: rgba(152,46,46,0)"></div>
                    <p></p>
                    <div class="name">
                        <h4>当前等级：100Lv</h4>  <h4>创作积分：200</h4>
                    </div>
                    <div style="height: 20px"></div>
                    <el-collapse v-model="activeNames" @change="handleChange">
                        <el-collapse-item title="主页 " name="1" style="justify-content: center;text-align: center;">
                            <p>
                                <el-link type="primary" :href="myindex">我的</el-link>
                            </p>
                            <el-link type="primary" :href="home">返回首页</el-link>
                        </el-collapse-item>


                        <el-collapse-item title="作品内容" name="2" style="justify-content: center">
                            <p>
                                <el-link type="primary" @click="gofa">新闻发布</el-link>
                            </p>
                            <el-link type="primary" :href="draf">草稿箱</el-link>
                        </el-collapse-item>
                        <el-collapse-item title="内容管理" name="3">
                            <p>
                                <el-link type="primary" :href="newlist">已发布新闻</el-link>
                            </p>
                            <el-link type="primary">主要链接</el-link>
                        </el-collapse-item>
                        <el-collapse-item title="个人中心" name="4">
                            <p>
                                <el-link type="primary" :href="zhanghaoshezhi">账号设置</el-link>
                            </p>
                            <p>
                                <el-link type="primary" :href="zhanghaoinfo">账号信息</el-link>
                            </p>
                            <p>
                                <el-link type="primary" :href="feedback">反馈表单</el-link>
                            </p>
                        </el-collapse-item>
                    </el-collapse>

                </div>
                <div class="right">
                    <router-view></router-view>

                </div>

            </div>
        </div>
    </div>
</template>

<style scoped>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


#tou {
    display: flex;
    float: right;
    align-items: center;
margin-right: 10px; width: auto;
    justify-content: flex-end;
}

.name {
    margin-left: 20%;
    width: 60%;
    background-color: #e3e9ec;
    align-items: center;
    border-radius: 10px;
    justify-content: center;
}

h3 {
    width: 100%;
    text-align: center;
}

.my-component ::v-deep .el-collapse {
    display: none;
}



#app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
background-color: #e3e9ec; background-image: url('./assets/beijing1.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

}

#header {
    top: 0px;
    position: fixed;
    width: 100%;
    background: rgba(216, 216, 220, 0.92);
    height: 60px;
    z-index: 1;
    color: #ffffff;
}

/* /deep/ .el-collapse-item__header {
    display: block;
    justify-content: center;
} */


.container {
    width: 100%;
    display: flex;
    flex-direction: row;
  max-width: 1400px;
    text-align: center;
}

.left {
height: 100vh;
padding: 20px;
margin: 20px;
margin-left: 80px;
width: 25%;
background-color: #ffffff;
border-radius: 20px;

}

.right {
height: 100vh;
padding: 20px; margin: 20px;
width: 55%;
background-color: rgba(255, 255, 255, 0.92);
    border-radius: 20px;
    flex-grow: 1;
    overflow-y: auto;
}

.el-collapse-item {

    align-items: center;
    text-align: center;
}

el-collapse {
    padding: 10px;
    margin: 10px;
width: 30%; justify-content: center;
    text-align: center;
    align-items: center;
    text-align: center;
}

</style>
<script>
import axios from "axios";

export default {
    data() {
        return {
            dialogVisible: false,
            draf: '/publisher/draft',
            myindex: '/publisher/index',
            home:'/homepage',
            feedback: '/publisher/feedback',
            zhuye: '/publisher/index',
            newlist: '/publisher/newlist',
            zhanghaoinfo: '/publisher/zhanginfo',
            zhanghaoshezhi: '/publisher/zhanghao',
            activeIndex: '1',
            activeIndex2: '1',
            id: this.$store.getters.getuserId,
            username: this.$store.getters.getuserName,
            avtar:localStorage.getItem("avtar")
        };
    },
    methods: {
        gofa(){
            this.$router.push('/editbox');
        },
        handleSelect(key, keyPath) {
            console.log(key, keyPath);
        },
        handleSubmit() {
            const data = {
                
                ...(this.avtar && { avtar: this.avtar }),
            };
            axios.post('/api/update_info', data)
                .then(response => {
                    console.log('请求成功', response.data);
                    // this.$store.state.touxiang=this.avtar;
                    this.getInfo();
                })
                .catch(error => {
                    console.error('请求失败', error);
                })
                .finally(() => {
                    // 无论成功或失败，都会执行的逻辑
                    this.dialogVisible = false; // 关闭对话框
                });
        },
    }
}

</script>